<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // generator函数 是ES6提供的一种异步编程解决方案，返回一个iterator结构，同时它是async/await的底层
    // generator函数通过yield关键字，将函数挂起
    // 它和普通函数的区别:
    // 1.function 后面，函数名之前有个*
    // 2.只能在函数内部使用yield表达式，让函数挂起

    function* func() {
        console.log('one')
        yield 2;
        console.log('two')
        yield 3;
        console.log('end')
    }

    let k = func(); // 只是返回一个迭代器对象，不对执行函数func
    console.log(k.next()) // 执行了next()，才会执行函数func
    console.log(k.next())
    console.log(k.next())

    console.log("===================================================")

    // yield的返回值是next调用，恢复当前yield执行传入的实参！！！

    function* add() {
        console.log('start');
        let x = yield '2';   // 第二次next时 x的值为20，不是yield表达式的值
        console.log('one:' + x);
        let y = yield '3';
        console.log('two:' + y);
        return x + y;
    }

    const q = add()
    console.log(q.next())
    console.log(q.next(20))
    console.log(q.next(30))

    console.log("===================================================")
    // 使用场景: 为不具备iterator接口的对象提供了遍历操作

    function* objectEntries(obj){
        // 对象中所有key保存到数组中
        const propKeys  = Object.keys(obj);
        for(const key of propKeys){
            yield [key,obj[key]]
        }
    }

    const obj = {
        name:'jack',
        age:21,
        email:'123@qq.com'
    }
    obj[Symbol.iterator] = objectEntries; // 迭代器函数
    console.log(obj)

    for(let [key,value] of objectEntries(obj)){
        console.log(`${key}:${value}`)
    }


</script>
</body>
</html>
